<script setup>
import {ref} from 'vue'
import {getLogisticsService, getOrderByIdService, orderListService} from "@/api/order.js";
import {getUserByIdService} from "@/api/user.js";

const totalpage = ref(0)

const queryConfig = ref({
  pagenum: 1,
  pagesize: 10
})
const orderList = ref([])
const getInit = async () => {
  const res = await orderListService(queryConfig.value)
  orderList.value = res.goods
  totalpage.value = res.total
}
const logisticsVisible = ref(false)
const logistics = ref([{
  "time": "2018-05-10 09:39:00",
  "ftime": "2018-05-10 09:39:00",
  "context": "已签收,感谢使用顺丰,期待再次为您服务",
  "location": ""
},
  {
    "time": "2018-05-10 08:23:00",
    "ftime": "2018-05-10 08:23:00",
    "context": "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
    "location": ""
  },
  {
    "time": "2018-05-10 07:32:00",
    "ftime": "2018-05-10 07:32:00",
    "context": "快件到达 [北京海淀育新小区营业点]",
    "location": ""
  },
  {
    "time": "2018-05-10 02:03:00",
    "ftime": "2018-05-10 02:03:00",
    "context": "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
    "location": ""
  },
  {
    "time": "2018-05-09 23:05:00",
    "ftime": "2018-05-09 23:05:00",
    "context": "快件到达 [北京顺义集散中心]",
    "location": ""
  },
  {
    "time": "2018-05-09 21:21:00",
    "ftime": "2018-05-09 21:21:00",
    "context": "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
    "location": ""
  },
  {
    "time": "2018-05-09 13:07:00",
    "ftime": "2018-05-09 13:07:00",
    "context": "顺丰速运 已收取快件",
    "location": ""
  },
  {
    "time": "2018-05-09 12:25:03",
    "ftime": "2018-05-09 12:25:03",
    "context": "卖家发货",
    "location": ""
  },
  {
    "time": "2018-05-09 12:22:24",
    "ftime": "2018-05-09 12:22:24",
    "context": "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
    "location": ""
  },
  {
    "time": "2018-05-08 21:36:04",
    "ftime": "2018-05-08 21:36:04",
    "context": "商品已经下单",
    "location": ""
  }])
const getLogistics = async (id) => {
  logisticsVisible.value = true
  logistics.value = await getLogisticsService(id)
}
const orderVisible = ref(false)
const orderInfo = ref({
  goods:[]
})
const getInfo =async (id)=>{
  orderVisible.value = true
 const res = await getOrderByIdService(id)
  orderInfo.value = res
}
getInit()
</script>
<template>
  <el-card>
    <template #header>
      <h2>订单列表</h2>
    </template>
    <el-table :data="orderList">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="order_number" label="订单编号" width="300"></el-table-column>
      <el-table-column prop="order_price" label="订单价格" width="100"></el-table-column>
      <el-table-column prop="order_pay" label="支付方式">
        <template #default="{row}">
          <el-tag v-if="row.order_pay==='0'" type="danger">未支付</el-tag>
          <el-tag v-else-if="row.order_pay==='1'" type="success">支付宝</el-tag>
          <el-tag v-else-if="row.order_pay==='2'" type="success">微信</el-tag>
          <el-tag v-else-if="row.order_pay==='3'" type="success">银行卡</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="pay_status" label="订单状态" width="100">
        <template #default="{row}">
          <el-tag v-if="row.pay_status==='0'" type="danger">未付款</el-tag>
          <el-tag v-else-if="row.pay_status==='1'" type="success">已付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="is_send" label="发货状态" width="100">
        <template #default="{row}">
          <el-tag v-if="row.is_send==='否'" type="danger">未发货</el-tag>
          <el-tag v-else type="success">已发货</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="order_fapiao_title" label="发票抬头" width="100"></el-table-column>
<!--      <el-table-column prop="consignee_addr" label="收货地址"></el-table-column>-->
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="text" @click="getInfo(row.order_id)">查看详情</el-button>
          <el-button type="text" @click="getLogistics(row.order_id)">查看物流</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="[10, 15, 20,25,30]"
                     :total="totalpage"
                     :page-size="queryConfig.pagesize"
                     :current-page="queryConfig.pagenum"
                     @update:pageSize="(val)=>{queryConfig.pagesize=val;getInit()}"
                     @update:currentPage="(val)=>{queryConfig.pagenum=val;getInit()}"
                     @prevClick="getInit"
                     @nextClick="getInit"/>
    </div>
  </el-card>
  <el-drawer title="物流详情" v-model="logisticsVisible">
    <el-timeline style="max-width: 600px">
      <el-timeline-item
          v-for="(activity, index) in logistics"
          :key="index"
          :timestamp="activity.time"
      >
        {{ activity.context }}
      </el-timeline-item>
    </el-timeline>
  </el-drawer>
  <el-dialog title="订单详情" v-model="orderVisible" width="800">
    <div class="info">
      <span>编号：{{orderInfo.order_number}}</span>
      <span>类别：{{orderInfo.order_fapiao_title}}</span>
      <span>订单价格：{{orderInfo.order_price}} 元</span>
      <span>是否发货：{{orderInfo.is_send}}</span>
      <span>支付状态：{{orderInfo.pay_status===0?"未支付":"已支付"}}</span>

    </div>
    <el-table :data="orderInfo.goods">
      <el-table-column prop="goods_id" label="商品ID"></el-table-column>
      <el-table-column prop="goods_number" label="商品数量"></el-table-column>
      <el-table-column prop="goods_price" label="商品价格"></el-table-column>
      <el-table-column prop="goods_total_price" label="总计"></el-table-column>
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-card {
  .page {
    display: flex;
    justify-content: center;

    .el-pagination {
      margin: 10px;
    }
  }
}

.el-dialog{
  .info{
    margin: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
}
</style>
